import React, { useState, useEffect,useLayoutEffect } from "react";

function LifeCycle(props) {
  const [state, setState] = useState(() => {
    console.log("getDerivedStateFromProps");
    return "";
  });
  useEffect(() => {
    //:数据请求
    console.log("componentDidMount");
    return () => {
      console.log("componentWillUmMount");
    };
  }, []);
  useEffect(() => {
    console.log("componentWillReceiveProps");
  }, [props]);
  useEffect(() => {
    console.log("componentDidUpdate");
  },);
  useLayoutEffect(()=>{
    console.log("useLayoutEffect - layout");
  })
  return (
    <>
      <div> 生命周期</div>
      <div>value:{state}</div>
      {props.num}
      <button onClick={() => setState(Math.random())}>改变值</button>
    </>
  );
}

export default LifeCycle;
